<template>
	<view class="Activity-Registration">
		<uni-card>
			<view class="">
				<uni-title type="h4" align="center" :title="allData.title"></uni-title>
			</view>
			<view class="flex-r">
				<text>{{allData.createTime}}</text>
			</view>
			<view class="textbox">
				<text>{{allData.detailed}}</text>
			</view>
			<view class="imgbox">
				<image :src="allData.photo" mode=""></image>
			</view>
			<view class="flex-center">
				<text>活动主题：</text>
			</view>
			<uni-title type="h4" align="center" :title="allData.theme"></uni-title>
			<view class="flex-center">
				<text>报名费用：</text><text class="red">{{allData.registration}}元</text><text>/组</text>
			</view>
			<view class="flex-center">
				<text>活动时间：</text>
			</view>
			<view class="flex-center">
				<text>{{allData.timeRange}}</text>
			</view>
			<view class="flex-center">
				<text>活动地点：</text>
			</view>
			<view class="flex-center">
				<text>{{allData.address}}</text>
			</view>
		</uni-card>
		<view class="button-box">
			<button type="default" @click="buPopup">立即报名</button>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content">
				<view class="popup-box">
					<text>请填写报名信息</text>
					<image @click="xPopup"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%B4%BB%E5%8A%A8%E8%AF%A6%E6%83%85-%E6%8A%A5%E5%90%8D%E4%B8%AD/clear_u1886.png"
						mode=""></image>
				</view>
				<view class="inputBox">
					<view class="">
						<uni-easyinput prefixIcon="personadd" v-model="childName" placeholder="请输入孩子姓名">
						</uni-easyinput>
					</view>
					<view class="">
						<uni-easyinput prefixIcon="phone" v-model="phone" placeholder="请输入手机号码">
						</uni-easyinput>
					</view>
					<view class="">
						<uni-easyinput prefixIcon="calendar" v-model="childAge" placeholder="请输入孩子年龄">
						</uni-easyinput>
					</view>
					<view class="bmf">
						<text>报名费</text>
						<text>￥{{allData.registration}}</text>
					</view>
					<view class="bubox">
						<button @click="ok">立即支付</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import http from "@/utils/http.js"

	import {
		ref,
		onMounted
	} from "vue"
	let childName = ref()
	let phone = ref()
	let childAge = ref()
	let allData = ref({})
	const popup = ref()
	let orderid = ref()
	const ok = () => {
		http({
			url: '/pay/alipay/webPay',
			method: 'post',
			params: {
				orderid: orderid.value,
				activityid: allData.value.id,
				wechatName: "小瓶盖",
				childName: childName.value,
				phone: phone.value,
				childAge: childAge.value,
				registration: allData.value.registration
			}
		}).then((res) => {
			console.log(0, res);
			uni.navigateTo({
				url: `/pages/paySuccess/paySuccess?id=${allData.value.id}`
			});
		})
	}
	const buPopup = () => {
		http({
			url: "/signUp",
			method: "post"
		}).then((res) => {
			console.log(res);
			if (res.code == 0) {
				orderid.value = res.data
			}
		})
		popup.value.open()
	};
	const xPopup = () => {
		popup.value.close()
	}


	onLoad((option) => {
		http({
			url: '/preSignUp/' + option.id,
			method: "post"
		}).then((res) => {
			console.log(res.data);
			if (res.code === 0) {
				allData.value = res.data
			}
		})
	})
</script>

<style lang="less">
	.textbox {
		// width: 630rpx;
		font-size: 24rpx;
		color: #999;
		text-indent: 2em;

	}

	.red {
		color: red;
		font-size: 28rpx;
		font-weight: 700;
	}

	.imgbox {
		image {
			width: 100%;
			height: 370rpx;
		}
	}

	.flex-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.button-box {
		padding: 25rpx;
		border-top: 1px solid #ccc;
		margin-top: 100rpx;

		button {
			background-color: rgba(47, 120, 255, 1);
			color: #fff;
		}
	}

	.popup-content {
		width: 568rpx;
		height: 640rpx;
		padding: 0 40rpx;

		.popup-box {
			padding: 40rpx 0;
			display: flex;
			justify-content: space-between;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.inputBox {
			view {
				margin: 20rpx 0;
			}

			.bubox {
				button {
					background-color: rgba(47, 120, 255, 1);
					color: #fff;
				}

			}

			.bmf {
				width: 100%;
				text-align: right;

				text:nth-child(2) {
					color: red;
				}
			}
		}
	}
</style>
